<body>
    <input id="checkboxInput" type="checkbox">
    <label class="toggleSwitch" for="checkboxInput"></label>
</body>
<style>
    /* 隐藏原生复选框 */
    #checkboxInput {
        display: none;
    }

    .toggleSwitch {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 80px;
        height: 40px;
        background-color: rgb(227, 227, 227);
        border-radius: 20px 10px 20px 10px;
        cursor: pointer;
        transition: background-color 0.5s ease;
    }

    .toggleSwitch::after {
        content: "";
        position: absolute;
        height: 40px;
        width: 40px;
        left: 0px;
        background: conic-gradient(
            from 0deg at 30% 60%,
            rgb(192, 46, 46) 0deg,
            rgb(239, 160, 160) 90deg,
            rgb(192, 46, 46) 180deg,
            rgb(239, 160, 160) 270deg,
            rgb(192, 46, 46) 360deg
        );
        border-radius: 20px 10px 20px 10px;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    background 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);
    }


    #checkboxInput:checked + .toggleSwitch::after {
        background: conic-gradient(
            from 180deg at 70% 40%,
            rgb(192, 46, 46) 0deg,
            rgb(239, 160, 160) 90deg,
            rgb(192, 46, 46) 180deg,
            rgb(239, 160, 160) 270deg,
            rgb(192, 46, 46) 360deg
        );
        transform: translateX(100%);
    }
</style>    